<template>
  <div>
    <p>{{ reverseMessage }}</p>
    <!-- getMessage是函数，需要调用 -->
    <p>{{ getMessage() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello, Vue",
    };
  },
  // 计算属性优势:
  // 带缓存
  // 计算属性对应函数执行后, 会把return值缓存起来
  // 依赖项不变, 多次调用都是从缓存取值
  // 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值
  computed: {
    reverseMessage() {
      return this.msg.split("").reverse().join("");
    },
  },
  methods: {
    getMessage() {
      return this.msg.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>
